class: center, middle, inverse, title-slide # LāExtension
:
Shiny
## Mes Premiers Pas ### Mickaƫl Canouil,
Ph.D.
(
m.canouil.fr
) ### Dernière mise à jour : 26-03-2021 --- class: part-slide <style type="text/css"> .glow { /*font-size: 80px;*/ /*color: #fff;*/ /*text-align: center;*/ -webkit-animation: glow 2s ease-in-out infinite alternate; -moz-animation: glow 2s ease-in-out infinite alternate; animation: glow 2s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #1b81e5, 0 0 40px #1b81e5, 0 0 50px #1b81e5, 0 0 60px #1b81e5, 0 0 70px #1b81e5;*/ } to { text-shadow: 0 0 20px #a9a9a9, 0 0 30px #a9a9a9, 0 0 40px #a9a9a9, 0 0 50px #a9a9a9; } } </style> # Diapositives et matériel<br>[<i class="fab fa-github" style="font-size: 250px;"></i><br>mcanouil/rshiny](https://github.com/mcanouil/rshiny/) --- class: part-slide # Préparer sa session<br><i class="fab fa-r-project" style="font-size: 250px;"></i> --- # Trucs et astuces * Eviter de changer votre répertoire de travail avec `setwd()`. * Ne pas utiliser de `.Rprofile` modifiant <i class="fab fa-r-project"></i>. * Désactiver la conversion automatique en facteurs `options(stringsAsFactors = FALSE)`. * Ne pas utiliser `rm(list = ls())` pour "rafraichir". * Ne pas utiliser la sauvegarde/restauration par défaut de <i class="fab fa-r-project"></i>. .pull-left[ .center[  ] ] .pull-right[ .center[  ] ] --- class: part-slide # Qu'est-ce que <i class="glow">Shiny</i> ?<br><img src = "data:image/png;base64,#images/shiny.png", width = "216px" /> --- # Avant <i class="glow">Shiny</i> ... Il était nécessaire de connaître/maîtriser : * **HTML**, pour concevoir des pages (statique) web. * **CSS**, pour ajouter du _style_ à une page HTML. * **JavaScript**, pour effectuer des "calculs" au sein d'une page HTML (via un navigateur). --- # <i class="glow">Shiny</i> Shiny est une extension <i class="fab fa-r-project"></i> permettant la création d'application web interactive directement depuis <i class="fab fa-r-project"></i>. * Page internet. * Documents (R Markdown) interactifs. * Tableaux de bords. Les applications Shiny sont compatibles avec : * CSS. * "html widgets". * JavaScript. --- # Installation & Chargement La version stable de Shiny peut se télécharger sur le CRAN. ```r install.packages("shiny") ``` La version en développement est disponible sur GitHub <i class="fab fa-github"></i>. ```r if (!require("remotes")) install.packages("remotes") remotes::install_github("rstudio/shiny") ``` Charger Shiny dans sa session <i class="fab fa-r-project"></i>. ```r library("shiny") ``` --- # Composantes d'une application <i class="glow">Shiny</i> + L'extension Shiny. ```r library("shiny") ``` + Une interface (`ui`, *i.e.*, "user interface"). ```r ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !") ``` + Une fonction serveur (`server`). ```r server <- function(input, output, session) { } ``` + La construction d'un objet "Shiny app". ```r shinyApp(ui, server) ``` ??? App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R) --- # Composantes d'une application <i class="glow">Shiny</i> L'application Shiny peut être démarrée par simple exécution. ```r library("shiny") ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !") server <- function(input, output, session) { } shinyApp(ui, server) ``` ??? App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R) --- # Composantes d'une application <i class="glow">Shiny</i> Ou via un script `app.R`, placé dans un répertoire portant généralement le nom de l'application. ```{} materials/00-app \-- app.R ``` ```r library("shiny") ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !") server <- function(input, output, session) { } shinyApp(ui, server) ``` ```r runApp("materials/00-app") ``` ??? App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R) --- # Composantes d'une application <i class="glow">Shiny</i> Une fois l'application démarrée, vous devriez voir une fenêtre s'ouvrir. ```r runApp("materials/00-app") ``` ```r #> Listening on http://127.0.0.1:4550 ``` <img src="data:image/png;base64,#D:/Profils/mcanouil/PROJECTS/mc-rshiny/images/00.png" width="720" style="display: block; margin: auto;" /> ??? App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R) * URL par défaut (hÓte) * Port défini au hasard * Console R "occupée" * Bouton "stop" * `Ctrl`+ `c` * Fermer la fenêtre de l'application --- # L'interface (`ui`) * `fluidPage()`, la fonction gérant la structure de la page internet ("responsive web design"). ```r ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !") ``` -- Pour ajouter des contrÓles (`*Input()`). -- * `textInput()`, la fonction gérant un champ de saisie de texte. ```r textInput(inputId = "name", label = "Nom", value = "default") ``` -- ```r ui <- fluidPage( textInput(inputId = "name", label = "Nom", value = "default") ) ``` ??? App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R) --- # L'interface (`ui`) Les contrÓles (`*Input()`) nativement disponibles : .pull-left[ * `checkboxGroupInput()` * `checkboxInput()` * `dateInput()` * `dateRangeInput()` * `fileInput()` * `numericInput()` ] .pull-right[ * `passwordInput()` * `selectInput()` * `selectizeInput()` * `sliderInput()` * `textAreaInput()` * `textInput()` ] --- # L'interface (`ui`) ```r runApp("materials/01-app") ``` ```r #> Listening on http://127.0.0.1:4550 ``` <img src="data:image/png;base64,#D:/Profils/mcanouil/PROJECTS/mc-rshiny/images/01.png" width="720" style="display: block; margin: auto;" /> ??? App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R) --- # Le serveur (`server`) Notre application ne contient aucune action serveur (`server`). ```r library("shiny") ui <- fluidPage( textInput(inputId = "name", label = "Nom", value = "default") ) server <- function(input, output, session) { } shinyApp(ui, server) ``` ??? App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R) --- # Le serveur (`server`) * Du `server` à `ui` \(\rightarrow\) `output`. ```r server <- function(input, output, session) { output$hello_message <- renderText("Bonjour") } ``` ```r output$id <- renderTYPE({ # Une expression générant la sortie de type "TYPE" }) ``` * Partie _gauche_ : objet (`output`) renvoyé vers l'interface (`ui`) avec un identifiant unique (`id`). * Partie _droite_ : fonction spécifique pour générer la sortie qui pourra être affichée dans l'interface (`ui`). ??? App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R) --- # Le serveur (`server`) Les fonctions `render*()` nativement disponibles : * `renderCachedPlot()` * `renderDataTable()` * `renderImage()` * `renderPlot()` * `renderPrint()` * `renderTable()` * `renderText()` * `renderUI()` --- # Le serveur (`server`) * Du `server` à `ui` \(\rightarrow\) `output`. ```r server <- function(input, output, session) { output$hello_message <- renderText("Bonjour") } ``` * `textOutput()`, la fonction gérant l'affichage des éléments construits par le serveur (`server`). ```r library("shiny") ui <- fluidPage( textInput(inputId = "name", label = "Nom", value = "default"), textOutput(outputId = "hello_message") ) server <- function(input, output, session) { output$hello_message <- renderText("Bonjour") } shinyApp(ui, server) ``` ??? App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R) --- # Première application <i class="glow">Shiny</i> ```r library("shiny") ui <- fluidPage( textInput(inputId = "name", label = "Nom", value = "default"), textOutput(outputId = "hello_message") ) server <- function(input, output, session) { output$hello_message <- renderText("Bonjour") } shinyApp(ui, server) ``` ??? App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R) --- # Première application <i class="glow">Shiny</i> ```r runApp("materials/02-app") ``` ```r #> Listening on http://127.0.0.1:4550 ``` <img src="data:image/png;base64,#D:/Profils/mcanouil/PROJECTS/mc-rshiny/images/02.png" width="720" style="display: block; margin: auto;" /> ??? App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R) --- class: part-slide # <img src = "data:image/png;base64,#https://avatars1.githubusercontent.com/u/8896044" height = "150px" id = "picture" /> .center[ <a href = "http://m.canouil.fr" target = "_blank"><i class = "fas fa-home"></i> m.canouil.fr</a> .column[ <a href = "https://www.linkedin.com/in/mickael-canouil/" target = "_blank"><i class = "fab fa-linkedin"></i> mickael-canouil</a> ] .column[ <a href = "https://github.com/mcanouil/" target = "_blank"><i class = "fab fa-github"></i> mcanouil</a> ] .column[ <a href = "https://twitter.com/mickaelcanouil/" target = "_blank"><i class = "fab fa-twitter"></i> @mickaelcanouil</a> ] ]